<!--
 * 功能： 导航数据item
 * 作者： caihan
 * 日期:  2021-8-17 2:27:53 ?F10: PM?
 -->
<template>
	<view class="flex-column my20 mx30 bcmain shadow" style="border-radius: 10rpx;">
		<view class="fs32 fbold cfff mx30 mt20" @click.stop="onClickTreeItem()">{{data.name}}</view>
		<view class="flex-wrap mx30 mt20">
			<block v-for="(item, index) in data.articles" :key="index">
				<view class="item line-h1" @click.stop="onClickTreeChildrenItem(item)">
					<view>{{ item.title }}</view>
				</view>
			</block>
		</view>
	</view>
</template>

<script>
	export default {
		name: "tree-item",
		components: {},
		data() {
			return {}
		},
		props: {
			data: {
				type: Object,
				default: () => {
					return {
						articles: [{
							apkLink: "",
							audit: 1,
							author: "小编",
							canEdit: false,
							chapterId: 272,
							chapterName: "常用网站",
							collect: false,
							courseId: 13,
							desc: "",
							descMd: "",
							envelopePic: "",
							fresh: false,
							host: "",
							id: 1848,
							link: "https://developers.google.cn/",
							niceDate: "2018-01-07 18:59",
							niceShareDate: "未知时间",
							origin: "",
							prefix: "",
							projectLink: "",
							publishTime: 1515322795000,
							realSuperChapterId: 0,
							selfVisible: 0,
							shareDate: null,
							shareUser: "",
							superChapterId: 0,
							superChapterName: "",
							tags: [],
							title: "Google开发者",
							type: 0,
							userId: -1,
							visible: 0,
							zan: 0
						}],
						cid: 272,
						name: "常用网站"
					}
				}
			}
		},
		computed: {
			//计算属性
		},
		watch: {},
		mounted() {
			//挂载到实例上去之后调用
			this.$nextTick(() => {
				// Code that will run only after the
				// entire view has been rendered
			})
		},
		created() {
			//在实例创建完成后被立即调用
		},
		methods: {
			onClickTreeItem: function() {
				this.$navTo(`/packages/article/article-list-page?cid=${this.data.cid}`);
			},
			onClickTreeChildrenItem: function(item) {
				this.$navTo(`/packages/article/article-list-page?cid=${item.chapterId}`);
			}
		}
	}
</script>

<style lang="scss" scoped>
	.item {
		background: #f0f0f0;
		height: 50rpx;
		line-height: 50rpx;
		max-width: 100%;
		margin: 0 30rpx 30rpx 0;
		padding: 0 10rpx;
		border-radius: 10rpx;
		color: $c333;
	}
</style>
